<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>工作台</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta name="renderer" content="webkit">

        <link rel="stylesheet" href="/v/index.css" />
        <script src="/v/vue3.js"></script>
    </head>
    <body>
        <div id="app">
           <p v-for="m in message">
            {{m}}
           </p>
        </div>
        <script>
            const { createApp } = Vue;
            const app = createApp({
              data(){
                return {
                    ws:null,
                    message:[]
                }
              },
              methods:{
                onopen(){
                    console.log("websocket已连接")
                },
                onerror(err){
                    console.error("websocket发生错误", err)
                },
                onmessage(event){
                    this.message.push(event.data)
                }
              },
              mounted(){
                this.ws = new WebSocket("ws://127.0.0.1:9909/ws")
                this.ws.onopen = this.onopen
                this.ws.onerror = this.onerror
                this.ws.onmessage = this.onmessage
              }
            });
            app.mount('#app');

        </script>
    </body>

</html>